@import '~scss/variables';
@import '~scss/mixins';

.portal {
  :global .ReactModal__Overlay--after-open {
    background-color: transparent !important;
    z-index: 2001 !important;
    transition: none;
  }
}

.modal {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 0;
  opacity: 0.96;
  background-color: #eff4f9;
}

.body {
  padding: 0;
  border-radius: 0;
  max-height: unset;
  overflow-y: auto;
}

.wrapper {
  width: 940px;
  margin: 0 auto;
}

.title {
  margin-top: 40px;
  & > div {
    @include TypographyTitleH3($dark-color07);
    margin-bottom: 4px;
  }
  & > p {
    @include TypographyParagraph($dark-color01);
  }
}

.section {
  margin-top: 20px;

  &Title {
    @include TypographySymbolText;
    margin-bottom: 12px;
  }
}

.links {
  margin-top: 12px;

  & > a {
    display: inline-block;
    vertical-align: middle;
    width: 464px;
    margin-bottom: 12px;
    margin-right: 12px;
    padding: 10px 12px;
    border-radius: 3px;
    border: solid 1px $border-color;
    background-color: #ffffff;
    transition: all $trans-speed ease-in-out;

    &:hover {
      border-color: $border-hover-color;
      box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.2);
    }

    &:nth-child(2n + 2) {
      margin-right: 0;
    }
  }
}

.close {
  position: absolute;
  top: 20px;
  right: 20px;
  cursor: pointer;
  border-radius: 4px;
  padding: 3px !important;

  :global {
    .icon {
      width: 24px;
      height: 24px;
    }
  }
}

.empty {
  padding: 12px;
  border-radius: 3px;
  border: dashed 1px $border-color;
  background-color: #ffffff;
}

.histories {
  & > a {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    width: 226px;
    margin-bottom: 12px;
    margin-right: 12px;
    padding: 11px 12px;
    border-radius: 3px;
    border: solid 1px $border-color;
    background-color: #ffffff;
    transition: all $trans-speed ease-in-out;

    &:hover {
      border-color: $border-hover-color;
      box-shadow: 0 4px 8px 0 rgba(36, 46, 66, 0.2);
    }

    &:nth-child(4n + 4) {
      margin-right: 0;
    }

    .tag {
      position: absolute;
      top: 12px;
      right: 12px;
    }
  }
}
